<template>
  <view>
    <icons src="/static/icon/bell.svg" size="80" :props="{'fill': ',green'}"/>
    <movableview keys="test" x="50" y="400">
      <slot-view></slot-view>
      <icons src="/static/icon/bell.svg" size="80" :props="{'fill': ',red'}"/>
      <view style="width: 150rpx">
        可滑动悬浮框
      </view>
    </movableview>
    {{ formData }}
    <m-form
      :fields="fields"
      v-model="formData"
      @submit="save"
      valid-trigger="change"
      labelWidth="5em"
      v-model:loading="saveLoading"
    />
  </view>
</template>
<script setup>
import {ref} from 'vue'
import $handle from 'src/utils/handle'
import {jyztOptions} from '../../constant/auctionProject'

definePageConfig({
  navigationBarTitleText: 'demo'
})

const saveLoading = ref(false)
const formData = ref({
  name: '李华',
  age: '',
  phone: '',
  yzm: '343432'
})

const fields = ref([
  {
    prop: 'name', label: '用户名',
    inputAlign: 'left', showWordLimit: true,
    rule: [
      {required: true, message: '用户名必填'},
      {maxLength: 10, message: '用户名最长10个字符'}
    ]
  },
  {
    prop: 'xzfs', label: '单选下拉', type: 'select',
    rule: [
      {required: true},
      {options: jyztOptions},
    ]
  },
  {
    prop: 'mutisle', label: '单选跳转页面', type: 'select',
    jumpSelection: true,
    rule: [
      {required: true},
      {options: jyztOptions},
    ]
  },
  {
    prop: 'mutisle23', label: '异步加载数据', type: 'select',
    jumpSelection: true,
    rule: [
      {required: true},
      {
        options: () => {
          return new Promise((resolve => {
            setTimeout(() => {
              resolve({
                'a': 'sj宋大佬飞机',
                'ag': 'sj宋sdf大佬飞机',
                'h': 'sj宋大sdf佬飞机',
                'k': 'sj宋hdfg大佬飞机'
              })
            }, 10000)
          }))
        }
      },
    ]
  },
  {
    prop: 'mutislef', label: '多选select', type: 'select',
    multiple: true,
    rule: [
      {required: true},
      {options: jyztOptions},
    ]
  },
  {
    prop: 'age', label: '年龄',
    rule: [
      {required: true, message: '年龄必填'},
      {type: 'number', message: '年龄为数字'}
    ]
  },
  [
    {
      prop: 'name2', label: '开始时间', type: 'datetime',
      inputAlign: 'left', isLink: false,
      rule: [
        {required: true, message: '用户名必填'},
      ]
    },
    {label: '-', type: 'separator'},
    {
      prop: 'age3', label: '', type: 'datetime',
      placeholder: '请选择结束时间', isLink: false,
      rule: [
        {required: true, message: '用户名必填'},
      ]
    },
  ],
  [
    {
      prop: 'name32', label: '开始时间',
      inputAlign: 'left', isLabelLine: true,
      rule: [
        {required: true, message: '用户名必填'},
      ]
    },
    {
      prop: 'ag2e3', label: '开始时间2', isLabelLine: true,
      placeholder: '请输入用户',
      rule: [
        {type: 'number', message: '年龄为数字'}
      ]
    },
    {
      prop: 'age44', label: '开始时间3', isLabelLine: true,
      comment: '你是一个小狗子吗？',
      rule: [
        {required: true},
        {type: 'number', message: '年龄为数字'}
      ]
    },
  ],
  {
    prop: 'commensdf', label: '添加描述信息',
    comment: '这是一个描述的提示文字哈啦啦防守打法水电费水电费水电费水电费水电费水电费啦啦啦~~',
    rule: [
      {required: true},
      {type: 'number', message: '年龄为数字'}
    ]
  },
  {
    prop: 'fffff', label: '来访日期', type: 'date', format: 'yyyy年MM月dd日',
    rule: [
      {required: true},
    ]
  },
  {label: '分隔符', type: 'separator'},
  {
    prop: 'pp', label: '排放标准', type: 'checkbox',
    // isLabelLine: true,
    rule: [
      {required: true, message: '排放标准'},
      {
        options: {
          '1': '国打了客服就是劳动法看就老师的交付双龙夺凤聚少离多街坊邻居1',
          '2': '无',
          '3': '国水电费水电费3',
          '4': '国事实上哈',
          '5': '国4挨打的所',
          '6': '国5',
          '7': '国胜多负少封1',
        },
      },
    ]
  },
  {
    prop: 'phone', label: '手机号码', type: 'text',
    isLink: true, hidden: false,
    rule: [
      {required: true, message: '手机号码非空'},
      {type: 'phone', message: '手机号格式不对'},
    ]
  },
  {
    prop: 'validCode', label: '验证码', type: 'text',
    rule: [
      {required: true, message: '手机号码非空'},
    ],
    slots: {
      'right-view': ctx => {
        return <van-button type="info" size="small"
                           onTap={e => this.fields.find(i => i.prop === 'phone').hidden = !this.fields.find(i => i.prop === 'phone').hidden}>
          发送{ctx.field.label}
        </van-button>
      }
    }
  },
  {
    prop: 'lksj', label: '来款时间', type: 'datetime',
    isLink: true,
    rule: [
      {required: true},
    ]
  },
  {
    prop: 'hobbe', label: 'left-view-slot',
    showWordLimit: true,
    isLink: true,
    rule: [
      {maxLength: 40, message: '用户名最长10个字符'}
    ],
    slots: {
      'left-view': ctx => {
        return (
          <view style="color: red; margin-right: 0.3em;">
            <van-icon name="like"/>
            {ctx.field.wordLimit}
          </view>
        )
      },
    }
  },
  {
    prop: 'comment', label: 'textarea', type: 'textarea',
    showWordLimit: true,
    rule: [
      {maxLength: 100},
    ],
  },
  {
    prop: '标题独占一行', label: '标题独占一行', type: 'textarea',
    showWordLimit: true, isLabelLine: true,
    rule: [
      {required: true},
      {maxLength: 100},
    ],
  },
  {
    prop: 'input-view', label: '定义input-view-slot输入框',
    isLabelLine: true, required: true,
    slots: {
      'input-view': ctx => {
        return (
          <view>
            哈哈哈收款方就是快点解封
            <view style="margin-bottom: 1em;">http://www.baidu.com</view>
          </view>
        )
      }
    }
  },
  {
    prop: 'left-right-view',
    slots: {
      'left-view': ctx => <view>自定义左边和右边内容</view>,
      'right-view': ctx => {
        return (
          <van-button type="info" size="small"
                      onTap={e => ctx.field.clear()}>
            清空文本
          </van-button>
        )
      }
    }
  },
  {
    prop: '监听change事件', label: '监听change事件',
    onChange: e => {
      wx.showToast({
        title: 'change值' + e,
        icon: 'none',
        duration: 1000
      })
    }
  },
  {
    prop: '监听tap事件', label: '监听tap事件',
    onTap: e => {
      wx.showToast({
        title: 'tap',
        icon: 'none',
        duration: 1000
      })
    }
  },
  {
    prop: '监听focus事件', label: '监听focus事件',
    onFocus: e => {
      wx.showToast({
        title: 'onFocus',
        icon: 'none',
        duration: 1000
      })
    }
  },
  {
    prop: '监听blur事件', label: '监听blur事件',
    placeholder: '输入框blur时会触发事件',
    onBlur: e => {
      wx.showToast({
        title: 'onBlur',
        icon: 'none',
        duration: 6000
      })
    }
  },
  {
    prop: '禁用clearable', label: '禁用clearable',
    placeholder: '禁用clearable啦啦',
    clearable: false
  },
])

function save(e) {
  saveLoading.value = true
  $handle(f2, formData.value, {
    successMsg: res => res.body.data.name + '保存成功', // 成功的提示信息
    errorMsg: '保存失败' // 失败的提示信息
  }).then(r => {
    saveLoading.value = false
    console.info(r)
  }).catch(e => {
    saveLoading.value = false
    if (e.validError) { // 验证有错误
      console.info(e.errFields)
    }
  })
}

function f2(a) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        meta: {
          status: 'success',
          message: '不是什么东西啊??'
        },
        body: {
          total: 100,
          data: a
        }
      })
    }, 1000)
  })
}
</script>

<style lang="scss">
</style>
